<template>
	<view>
		<view class="service"><!--  -->
		<br/>
			<uni-list>
				<uni-list-item :class="{'actives':from.serveName!='请选择服务'}" showArrow title="服务项目:" :rightText="from.serveName" clickable  @click="showSearchPicker=true" />
				
			</uni-list>
			<view class="buttonSER">
				<u-button  type="primary" shape="circle"size="small" text="开始服务" @click="clickStartService()"
					 color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
				></u-button>
			</view>
			
		    <search-picker
		    	v-model="showSearchPicker"
		    	title="请选择服务"
		    	:data="listServi"
		    	:initSelected="initSelected"
		    	:showSearch="true"
		    	:multiple="false"
		    	@confirm="onConfirm"
		    	
		    />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',//加载函数
				showSearchPicker:false,
				listServi:[],
				initSelected: [],
				elderly:{},
				from:{
					serveName:"请选择服务",
					price:"",
					unit:"",
					id:"",
				},
			}
		},
		onLoad(options) {
			this.reset()//重置表单
			console.log("sss："+JSON.stringify(options))
			if ('params' in options) {
			    let data = JSON.parse(decodeURIComponent(options.params));
				this.elderly=data;
			    console.log(JSON.stringify(data))
				  //数据处理
				let json=JSON.parse(data.homemakingName)
				json.forEach((item,index)=>{
					console.log("选择服务",item)
					this.listServi.push({
						label:item.name,
						value:item.id,
						id:item.id,
						name:item.name,
						price:item.price,
						unit:item.unit,
					})
				})
				 
				 
				 
			}else{
				this.status = 'nomore';
			}
			
			
		},
		methods: {
			//选择服务
			onConfirm(val){
				console.log("选择服务",val)
				let item=this.listServi.find(item=>item.id=val[0].val)
				console.log("选择服务item",item)
				this.from.serveName=item.name
				this.from.price=item.price
				this.from.unit=item.unit
				this.from.id=item.id
			},
			reset(){
				this.form = {
				  serveName: undefined,
				  price: undefined,
				  unit: undefined,
				  id: undefined,
				 
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
.service{
		//width:500rpx;
		//padding: 20rpx;
		border-radius: 10px;
		margin-top: 50rpx;
	}
	.buttonSER{
		margin-top: 50rpx;
	}
	.actives /deep/.uni-list-item__extra-text{
			color: #000000;
		}
</style>
